import React, { useState } from 'react';
import { Table, Button } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
const { Column } = Table;

const data = [
  {
    key: 1,
    name: 'John Brown sr.',
    age: 60,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: 11,
        name: 'John Brown',
        age: 42,
        address: 'New York No. 2 Lake Park',
      },
      {
        key: 12,
        name: 'John Brown jr.',
        age: 30,
        address: 'New York No. 3 Lake Park',
        children: [
          {
            key: 121,
            name: 'Jimmy Brown',
            age: 16,
            address: 'New York No. 3 Lake Park',
          },
        ],
      },
      {
        key: 13,
        name: 'Jim Green sr.',
        age: 72,
        address: 'London No. 1 Lake Park',
        children: [
          {
            key: 131,
            name: 'Jim Green',
            age: 42,
            address: 'London No. 2 Lake Park',
            children: [
              {
                key: 1311,
                name: 'Jim Green jr.',
                age: 25,
                address: 'London No. 3 Lake Park',
              },
              {
                key: 1312,
                name: 'Jimmy Green sr.',
                age: 18,
                address: 'London No. 4 Lake Park',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows,
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};
export default function menuTable() {
  const [selectionType, setSelectionType] = useState('checkbox');
  return (
    <Table
      rowSelection={{ type: selectionType, ...rowSelection }}
      dataSource={data}
      scroll={{ x: 1300 }}
    >
      <Column title="key" dataIndex="key" key="key" />
      <Column title="name" dataIndex="name" key="name" />
      <Column title="Address" dataIndex="address" key="address" />
      <Column title="age" dataIndex="age" key="age" />
      <Column title="age" dataIndex="age" key="age" />
      <Column title="age" dataIndex="age" key="age" />
      <Column title="age" dataIndex="age" key="age" />
      <Column title="age" dataIndex="age" key="age" />
      <Column title="age" dataIndex="age" key="age" />

      <Column
        title="Action"
        key="action"
        render={(text, record) => <Button icon={<SettingOutlined />}></Button>}
      />
    </Table>
  );
}
